<template>
  <el-drawer
    class="basic-drawer"
    :model-value="visible"
    size="50%"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    @open="handleOpen"
    @closed="handleClose"
  >
    <template #header>
      <section class="flex items-center">
        <span class="font-bold">Acme账户</span>
        <span class="text-[#8F959E] text-sm"
          >（Acme 账户用于申请免费证书）</span
        >
      </section>
    </template>
    <section>
      <el-button type="primary" class="mb-6" @click="handleCreate">
        <app-icon name="add" class="mr-2"></app-icon>
        创建账户</el-button
      >
    </section>
    <el-table
      v-loading="loading"
      :tooltip-options="{ popperClass: 'basic-tooltip' }"
      class="basic-table"
      :data="tableData"
    >
      <template #empty><table-empty /></template>
      <el-table-column
        prop="email"
        label="邮箱"
        show-overflow-tooltip
        :formatter="emptyFormatter"
        min-width="160"
      />
      <el-table-column
        prop="type"
        label="账号类型"
        min-width="100"
        :formatter="emptyFormatter"
      >
        <template #default="{ row }">
          {{ getOptionsLabel(ACCOUNT_TYPE_OPTS, row.type) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="key_type"
        label="密钥算法"
        min-width="100"
        :formatter="emptyFormatter"
      >
        <template #default="{ row }">
          {{ getOptionsLabel(ALGORITHM_OPTS, row.key_type) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="url"
        label="URL"
        min-width="280"
        show-overflow-tooltip
        :formatter="emptyFormatter"
      />
      <el-table-column prop="action" label="操作" width="60">
        <template #default="{ row }">
          <el-button link type="danger" @click="handleDelete(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <basic-pagination
      :pagination="pagination"
      :disabled="loading"
      @change="getTableList()"
    />
  </el-drawer>
  <create-account
    v-model:visible="acmeState.visible"
    v-model:loading="acmeState.loading"
    @refresh="getTableList"
  />
</template>
<script lang="ts" setup>
import type { AcmeParams } from '@/apis/model/acme'
import { ACCOUNT_TYPE_OPTS, ALGORITHM_OPTS } from '@/config/constant/cert'

import CreateAccount from './components/CreateAccount.vue'
const { setMessageBox } = useMessageBox()
interface IProps {
  visible: boolean
}
withDefaults(defineProps<IProps>(), {
  visible: false
})
// 刷新表格事件
interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'refresh'): void
}
const emit = defineEmits<IEmit>()
const acmeState = reactive({
  visible: false,
  loading: false
})
const queryState = reactive<AcmeParams & SortCustomParams>({
  limit: 0,
  offset: 20,
  sort: 'created_at',
  order: 'desc'
})
const {
  data: tableData,
  loading,
  pagination,
  run: getTableList
} = useListRequest(getAcmeApi, queryState)
//弹窗打开
const handleOpen = () => {
  getTableList()
}
const handleCreate = () => {
  acmeState.visible = true
}
const handleDelete = (row: any) => {
  setMessageBox({
    icon: true,
    isHtml: true,
    content: '<p>确定删除此账户？</p>',
    title: '提示',
    async submit() {
      try {
        await deleteAcmeApi({ id: row.id! })
        ToastUtils.success('删除成功')
        getTableList()
        setMessageBox({ visible: false })
      } finally {
        setMessageBox({ loading: false })
      }
    }
  })
}
//弹窗关闭
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style lang="scss" scoped>
.custom-tabs {
  :deep(.el-tabs__nav-wrap)::after {
    height: 0px;
  }
}
</style>
